import { Flex } from "@/components/flex";
import { Typography } from "@/components/typography";
import { Card } from "@/components/base";
import React from 'react';
import styles from './index.module.less';
import { PageController } from '../../page-controller';
import { useObserver } from "mobx-react-lite";

const { Text } = Typography;

interface StatisticCardProps {
    value: number | string;
    label: string;
    color: string;
}

const StatisticCard: React.FC<StatisticCardProps> = ({ value, label, color }) => {
    return (
        <Card className={styles['card']}>
            <Flex vertical align='center'>
                <Text size={24} strong style={{ color }}>{value}</Text>
                <Text size={12}>{label}</Text>
            </Flex>
        </Card>
    );
};

export function Statistics() {
    const pageController = React.useContext(PageController.Context);
    const total = useObserver(() => pageController.total);

    return (
        <Flex gap={10} style={{ padding: '0 16px' }}>
            <StatisticCard 
                value={total}
                label="总服务项目"
                color="#db2777"
            />
            <StatisticCard 
                value={'**'}
                label="启用项目"
                color="#16a34a"
            />
        </Flex>
    )
} 

